<template>
    <div>
        <!--右边-->
        <div class="h-27">
            <div class="h-32 h1-32 m-0">
                <ul class="h-33 m-1">
                    <li :class="type==1?'active':''" @click="changeType(1)">基本资料</li>
                    <li :class="type==2?'active':''" @click="changeType(2)">账户绑定</li>
                    <li :class="type==3?'active':''" @click="changeType(3)">收货地址</li>
                    <li :class="type==4?'active':''" @click="changeType(4)">实名认证</li>
                </ul>
                <div class="m-2">
                    <div class="m-3" v-if="type==1">
                        <form class="m-4">
                            <div class="m-5">
                                <div class="m-6" @click="editAvatar">
                                    <img class="m-7" :src="userInfo.avatar?userInfo.avatar:require('@/assets/image/user_tx.png')"/>

                                    <div class="m-8">点击更换
                                      <input type="file" name="" accept="image/gif,image/jpeg,image/jpg,image/png" @change="fileChange">
                                    </div>
                                </div>
                            </div>
                            <div class="m-9">
                                <span class="m-10">昵称</span>
                                <input class="m-11" type="text" value='徐爽爽爽'/>
                                <a class="m-12" href="javascript:;">编辑</a>
                            </div>
                            <div class="m-9">
                                <span class="m-10">真实姓名</span>
                                <input class="m-11" type="text" value='徐爽爽爽' disabled="disabled"/>
                                <!--<a class="m-12" href="javascript:;">编辑</a>-->
                            </div>
                            <div class="m-9">
                                <span class="m-10">选择身份</span>
                                <div class="m-13">
                                    <label><input name="type" type="radio" value="1" v-model="userInfo.type"/>企业 </label>
                                    <label><input name="type" type="radio" value="0" v-model="userInfo.type"/>个人 </label>
                                </div>
                            </div>
                            <div class="m-9">
                                <span class="m-10">手机号</span>
                                <input class="m-11 number" type="text" value='12345678910' disabled="disabled"/>
                                <a class="m-12 m1-12"  @click="changePhone">编辑</a>
                            </div>
                            <div class="m-9">
                                <span class="m-10">邮箱</span>
                                <input class="m-11 number1" type="text" value='12345678910@qq.com'/>
                                <a class="m-12 m2-12" href="javascript:;">编辑</a>
                            </div>
                            <div class="m-14"><button class="m-15">保存</button></div>
                        </form>
                    </div>
                    <div class="m-3" v-if="type==2">
                        <form class="m-4" style="padding-top: 0;">
                            <div class="m-9">
                                <span class="m-10">微信</span>
                                <input class="m-11" type="text" value='12345678910' disabled="disabled"/>
                                <a class="m-12" href="javascript:;">已绑定</a>
                            </div>
                            <div class="m-9">
                                <span class="m-10">支付宝</span>
                                <input class="m-11" type="text" value='暂未绑定支付宝' disabled="disabled"/>
                                <a class="m-12" href="javascript:;">绑定</a>
                            </div>
                            <div class="m-9">
                                <div class="m-28"><img src="@/assets/image/yhk.png"/><span>工商银行</span></div>
                                <div class="m-29"><span class="m-30">1234123412341234</span><span class="m-31">储蓄卡</span></div>
                                <a class="m-12" href="javascript:;">删除</a>
                            </div>
                            <div class="m-9">
                                <div class="m-28"><img src="@/assets/image/yhk.png"/><span>招商银行</span></div>
                                <div class="m-29"><span class="m-30">1234123412341234</span><span class="m-31">储蓄卡</span></div>
                                <a class="m-12" href="javascript:;">删除</a>
                            </div>
                            <div class="m-14">
                                <a href="javascript:;" class="m-32">
                                    <span class="m-33">+</span>
                                    <span class="m-34">添加银行卡</span>
                                </a>
                            </div>
                        </form>
                    </div>
                    <div class="m-3" v-if="type==3">
                        <div class="m-35">
                            <div class="m-36">
                                <div class="m-37">添加收货地址</div>
                                <div class="layui-form"  action="">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">*收货人</label>
                                        <div class="layui-input-block">
                                            <input style="width: 200px;" type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item" id="area-picker">
                                        <div class="layui-form-label">*所在地区</div>
                                        <div class="layui-input-inline" style="width: 200px;">
                                            <select name="province" class="province-selector" data-value="" lay-filter="province-1">
                                                <option value="">请选择省</option>
                                            </select>
                                        </div>
                                        <div class="layui-input-inline" style="width: 200px;">
                                            <select name="city" class="city-selector" data-value="" lay-filter="city-1">
                                                <option value="">请选择市</option>
                                            </select>
                                        </div>
                                        <div class="layui-input-inline" style="width: 200px;">
                                            <select name="county" class="county-selector" data-value="" lay-filter="county-1">
                                                <option value="">请选择区</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">*详细地址</label>
                                        <div class="layui-input-block">
                                            <input style="width: 620px;" type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">*手机号码</label>
                                        <div class="layui-input-block">
                                            <input style="width: 330px;" type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item" pane="">
                                        <label class="layui-form-label"></label>
                                        <div class="layui-input-block">
                                            <input type="checkbox" name="address" lay-skin="primary" title="设为默认地址">
                                        </div>
                                    </div>
                                    <div class="layui-form-item" style="margin-top: 55px;">
                                        <div class="layui-input-block">
                                            <button v-if="!addButton" class="layui-btn" lay-submit="" lay-filter="demo1" @click="editAdress">保存并使用</button>
                                            <button v-if="addButton" class="layui-btn" lay-submit="" lay-filter="demo1" @click="addAdress">新增地址</button>
                                            <button type="reset" class="layui-btn layui-btn-primary" @click="">取消</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="m-38">
                                <table class="m-39">
                                    <thead>
                                    <tr>
                                        <th width="15%">收件人</th>
                                        <th width="15%">所在地区</th>
                                        <th width="25%">详细地址</th>
                                        <th width="15%">手机号</th>
                                        <th width="15%">操作</th>
                                        <th width="15%"></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td class="e-1">xxx</td>
                                        <td>xxxxxxxxxxxxxx</td>
                                        <td>xxxxxxxxxxxx</td>
                                        <td>123456789</td>
                                        <td><a href="javascript:;">修改</a>/<a href="javascript:;">删除</a></td>
                                        <td><a href="javascript:;">设为默认</a></td>
                                    </tr>
                                    <tr>
                                        <td class="e-1">xxx</td>
                                        <td>xxxxxxxxxxxxxx</td>
                                        <td>xxxxxxxxxxxx</td>
                                        <td>123456789</td>
                                        <td><a href="javascript:;">修改</a>/<a href="javascript:;">删除</a></td>
                                        <td><a href="javascript:;">设为默认</a></td>
                                    </tr>
                                    <tr>
                                        <td class="e-1">xxx</td>
                                        <td>xxxxxxxxxxxxxx</td>
                                        <td>xxxxxxxxxxxx</td>
                                        <td>123456789</td>
                                        <td><a href="javascript:;">修改</a>/<a href="javascript:;">删除</a></td>
                                        <td><a href="javascript:;">设为默认</a></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="m-3" v-if="type==4">
                        <div class="m-40">
                            <div class="m-41">你还没有认证银行卡，赶紧认证吧!</div>
                            <div class="m-42"><a href="javascript:;">立即认证</a></div>
                        </div>
                        <div class="m-43">
                            <form class="m-44">
                                <div class="m-45">
                                    <span class="m-46">姓名：</span>
                                    <div class="m-47">
                                        <input type="text" placeholder="请输入您的真实姓名"/>
                                    </div>
                                </div>
                                <div class="m-45">
                                    <span class="m-46">身份证号码：</span>
                                    <div class="m-47">
                                        <input type="text" placeholder="请输入正确的身份证号"/>
                                    </div>
                                </div>
                                <div class="m-45">
                                    <span class="m-46">个人银行卡号：</span>
                                    <div class="m-47">
                                        <input type="text" placeholder="请输入本人银行卡号"/>
                                    </div>
                                </div>
                                <div class="m-45">
                                    <span class="m-46">手机号：</span>
                                    <div class="m-47">
                                        <input type="text" placeholder="请输入你银行卡绑定的手机号"/>
                                        <button type="button" class="m-48">获取验证码</button>
                                    </div>
                                </div>
                                <div class="m-49">
                                    <button type="button" class="m-50">下一步</button>
                                    <div class="m-51"><a href="javascript:;">认证不成功？</a></div>
                                </div>
                            </form>
                        </div>
                        <div class="m-62">
                            <img src="@/assets/image/tg.png" class="m-63" />
                            <div class="m-41">你还没有认证银行卡，赶紧认证吧!</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="clear: both;"></div>
      <!--手机号弹框-->
      <div class="m-16" v-if="showEditPhone">
        <div class="m-17">
          <form class="m-18">
            <div class="m-19"><span class="m-20" >修改手机号</span><img class="m-21" src="@/assets/image/close.png"/></div>
            <div class="m-22">
              <div class="m-23"><input class="m-24" type="text" v-model="newPhone" placeholder="请输入新手机号码"/></div>
              <div class="m-23"><input class="m-24 m-25" type="text" placeholder="请输入验证码"/>
                <button v-if="smsButton" type="button" class="m-26" @click="sendOutCode">发送验证码</button>
                <button v-if="!smsButton" type="button" class="m-26">{{count}} s</button>
              </div>
              <button class="m-27" type="button">保存</button>
            </div>
          </form>
        </div>
      </div>

    </div>
</template>

<script>
    import {getUserData,editUserData,editAccountBinding,edithAcceptAddress,sendoutSms} from '@/api/userIndex/userInfoEdit';
    export default {
        name: "userInfoEdit",
        data(){
            return{
                type:1,
                showEditPhone:false,
                newPhone:undefined, //新手机号
                code:undefined,     //验证码
                smsButton:true,    //防止短信重复发送
                count:'', //短信倒计时
                timer:null, //定时器

                userInfo:{
                  type:1,nick_name:"张三昵称",full_name:"李四",phone:"13518239123",email:"135@163.com",credit_code:"z-100-120"
                },
                addButton:true, //新增按钮
                addAcceptName:undefined, //新增收件人
                addAdress:undefined,//新增详细地址
                addAcceptPhone:undefined, //新增手机号
                addProvince:undefined, // 新增省
                addCity:undefined, // 新增市
                addArea:undefined,// 新增区
                accept_address:[
                  {accept_name:"张三",province:1,city:1,area:1,adress:"2栋1单元602",accept_phone:"13606068921",state:0},
                  {accept_name:"张三",province:1,city:1,area:1,adress:"2栋1单元602",accept_phone:"13606068921",state:0},
                  {accept_name:"张三",province:1,city:1,area:1,adress:"2栋1单元602",accept_phone:"13606068921",state:0}
                ]

            }
        },
        methods:{
            changeType(e){
                this.type=e;
            },
            changePhone(){  //修改手机号弹窗
              if(this.showEditPhone){this.showEditPhone=false}else{this.showEditPhone=true}
            },
            sendOutCode(){ //发送验证码
              if(!this.smsButton){
                return   //拦截
              }
              this.smsButton=false; //按钮失效
              var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
              if (!myreg.test(this.newPhone)) {
                this.msgError("手机格式不正确");
                this.smsButton=true;
              } else {
                const TIME_COUNT=60;
                if(!this.timer){
                  this.count=TIME_COUNT;
                  this.timer=setInterval(()=>{
                    if(this.count>0 && this.count<=TIME_COUNT){
                      this.count--;
                    }else{
                      this.smsButton=true;
                      clearImmediate(this.timer)
                      this.timer=null
                    }
                  },1000)
                }
                let data={phone:this.newPhone}
                sendoutSms(data).then(response=>{
                  if(response.code===200){
                    this.msgSuccess("短信发送成功");
                  }
                })
              }
            },
            //上传图片
            editAvatar(){

            },
            fileChange(){
              console.log("上传图片");
            }
        }
    }
</script>

<style scoped>
    @import "../../layui/css/layui.css";
    @import "../../css/index.css";
    @import "../../css/user_listing.css";
    @import "../../css/user_info.css";
    @import "../../css/idangerous.swiper.css";
</style>
